<!DOCTYPE html>
<html>
<head>
    <title>Parallel Plates Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="480"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Define Geometry ---
    const plateWidth = 220;
    const plateHeight = 20;
    const centerX = canvas.width / 2;
    const startX = centerX - plateWidth / 2;

    const y_A = 50;
    const d1_gap = 60;
    const d0_gap = 80;
    const d2_gap = 60;

    const y_B = y_A + plateHeight + d1_gap;
    const y_C = y_B + plateHeight + d0_gap;
    const y_D = y_C + plateHeight + d2_gap;

    // --- Helper function for double-headed vertical arrow ---
    function drawVerticalDoubleArrow(ctx, x, y_start, y_end) {
        const headlen = 10;
        // Main line
        ctx.beginPath();
        ctx.moveTo(x, y_start);
        ctx.lineTo(x, y_end);
        ctx.stroke();

        // Arrow head at y_start (pointing up)
        ctx.beginPath();
        ctx.moveTo(x - 5, y_start + headlen);
        ctx.lineTo(x, y_start);
        ctx.lineTo(x + 5, y_start + headlen);
        ctx.stroke();

        // Arrow head at y_end (pointing down)
        ctx.beginPath();
        ctx.moveTo(x - 5, y_end - headlen);
        ctx.lineTo(x, y_end);
        ctx.lineTo(x + 5, y_end - headlen);
        ctx.stroke();
    }

    // --- Draw Plates ---
    ctx.strokeRect(startX, y_A, plateWidth, plateHeight);
    ctx.strokeRect(startX, y_B, plateWidth, plateHeight);
    ctx.strokeRect(startX, y_C, plateWidth, plateHeight);
    ctx.strokeRect(startX, y_D, plateWidth, plateHeight);

    // --- Draw Labels ---
    // Plate labels (A, B, C, D)
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('A', startX - 30, y_A + plateHeight / 2);
    ctx.fillText('B', startX - 30, y_B + plateHeight / 2);
    ctx.fillText('C', startX - 30, y_C + plateHeight / 2);
    ctx.fillText('D', startX - 30, y_D + plateHeight / 2);

    // Charge label (q)
    ctx.fillText('q', startX + plateWidth + 25, y_B + plateHeight / 2);

    // --- Draw Distance Markers ---
    // d1
    const d1_top = y_A + plateHeight;
    const d1_bottom = y_B;
    drawVerticalDoubleArrow(ctx, centerX, d1_top, d1_bottom);
    ctx.textAlign = 'left';
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('d', centerX + 15, (d1_top + d1_bottom) / 2);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('1', centerX + 27, (d1_top + d1_bottom) / 2 + 7);

    // d2
    const d2_top = y_C + plateHeight;
    const d2_bottom = y_D;
    drawVerticalDoubleArrow(ctx, centerX, d2_top, d2_bottom);
    ctx.textAlign = 'left';
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('d', centerX + 15, (d2_top + d2_bottom) / 2);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('2', centerX + 27, (d2_top + d2_bottom) / 2 + 7);
    
    // --- Draw Connecting Dashed Line and d0 label ---
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(centerX, y_B + plateHeight);
    ctx.lineTo(centerX, y_C);
    ctx.stroke();
    ctx.restore(); // restore to solid line

    const d0_midY = y_B + plateHeight + d0_gap / 2;
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('d', centerX + 25, d0_midY);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('0', centerX + 37, d0_midY + 7);

    // --- Draw Figure Caption ---
    ctx.font = '22px "Songti SC", "SimSun"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'alphabetic';
    ctx.fillText('图 1', centerX, y_D + plateHeight + 60);

</script>
</body>
</html>